<template>
	<view>
		<view class="header u-flex u-row-between bgColor">
			<view class="u-flex">
				<avatar-image width="124" :url="userInfo.avatar_url"></avatar-image>
				<view class="u-flex-col u-m-l-32 u-font-26 colf4">
					<text class="u-m-b-16 u-font-38 bold white">已连续签到{{signData.sign_day}}天</text>
					<text class="gray">明日可领{{signData.money}}积分</text>
				</view>
			</view>
			<view class="u-flex count ">
				<image src="~@/static/task/icon.png" class="icon" mode=""></image>
				<text class="u-m-l-20 white" >{{signData.points}}</text>
			</view>
		</view>
		<view class="points">
			<sign-in :list="signData"></sign-in>
		</view>

		<view class="btn" v-if="signData.type == 1">
			<text>已签到</text>
		</view>
		<view v-else class="btn" hover-class="hover-btn" @click="onSign" >
			<text>立即签到</text>
		</view>
	</view>
</template>

<script>
	import AvatarImage from '@/components/avatar-image'
	import signIn from './components/signIn'
	export default {
		components: {
		  AvatarImage,
		  signIn
		},
		data() {
			return {
				userInfo: {},
				signData: {}
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			console.log(this.userInfo);
			// console.log(this.$store)
			this.getSignIn()
		},
		methods: {
			 getSignIn() {
				 this.myhttp({
					url: '?s=/api/SignIn/getSignIn'
				}).then(res => {
					this.signData = res.data.data
					console.log(this.signData)
				})
			},
			onSign() {
				let that = this
				this.myhttp({
					url: '?s=/api/SignIn/signInAdd'
				}).then(res => {
					if(res.data.code == 1) {
						that.$success('签到成功')
						this.getSignIn()
					}else {
						that.$error(res.data.data)
					}
				})
			}
		}
	}
</script>

<style lang="scss">

	.header {
		padding: 50upx 30upx 190upx 24upx;
	}
	.bgColor {
		background: #282828;
	}
	.white {
		color: #FFFFFF;
	}
	.gray {
		color: #91919B;
	}
	.black {
		color: #1C1C1E;
	}
	.count {
		border: 1px solid #FFFFFF;
		border-radius: 50upx;
		padding: 8upx 45upx;
	}
	.points {
		width: calc(100vw - 40upx);
		margin: -130upx auto 0;
		background: #FFFFFF;
		border-radius: 30upx;
	}
	.icon {
		width: 68upx;
		height: 68upx;
	}
	.btn {
		width: max-content;
		padding: 30upx 200upx;
		background: #24232A;
		box-shadow: 0upx 1upx 10upx 0upx rgba(51, 46, 40, 0.51);
		border-radius: 48upx;
		color: #FFFFFF;
		position: fixed;
		left: 50%;
		bottom: 100upx;
		transform: translateX(-50%);
	}
</style>
